<template>
  <Layout class="p-5 bg-white">
    <Form
      class="p-5"
      :model="projectService"
      :rules="ruleValidate"
      :label-width="155"
    >
      <Row>
        <Col span="8" push="2">
          <FormItem class="w-100" label="服务项目名" prop="name">
            <Input v-model="projectService.name"></Input>
          </FormItem>
          <FormItem class="w-100" label="服务价格" prop="amount">
            <Input v-model="projectService.amount"></Input>
          </FormItem>
          <FormItem class="w-100" label="服务是否上架">
            <i-switch v-model="projectService.status"></i-switch>
          </FormItem>
          <FormItem class="w-100" label="服务描述">
            <Input v-model="projectService.des"></Input>
          </FormItem>
          <FormItem>
            <Button @click="submit" type="primary">提交</Button>
            <Button @click="cancel" style="margin-left: 8px">取消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Loadding v-bind:loadinghuan="isSpinShow"></Loadding>
  </Layout>
</template>
<script>
export default {
  data() {
    return {
      isSpinShow: false,
      ruleValidate: {
        name: [
          {
            required: true,
            message: '服务项目名不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        amount: [
          {
            required: true,
            message: '服务项目价格不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
      },
      projectService: {
        name: '',
        amount: '',
        status: '',
        des: '',
      },
      isReservationBackview: false,
    }
  },
  methods: {
    cancel: function() {
      this.$tabs.close({ to: '/projectService' })
    },
    submit: function() {
      if (this.$data.projectService.name.trim().length === 0) {
        this.message.error('服务项目名必须输入')
        return
      }
      if (this.$data.projectService.name.indexOf(' ') > -1) {
        this.message.error('服务项目名中不能有空格')
        return
      }
      if (this.$data.projectService.amount.trim().length === 0) {
        this.message.error('服务项目价格必须输入')
        return
      }
      if (this.$data.projectService.amount.indexOf(' ') > -1) {
        this.message.error('服务项目价格中不能有空格')
        return
      }
      let self = this

      this.isSpinShow = true
      this.http
        .put({
          url: '/projectService',
          param: { projectServiceStr: this.projectService },
        })
        .then((data) => {
          this.isSpinShow = false
          self.message.info('修改成功')
          this.$tabs.close({ to: '/projectService' })
        })
    },
    init: function() {
      this.searchProjectService()
    },
    searchProjectService: function() {
      let self = this
      this.http
        .get({
          url: `/projectService/info/${this.$route.params.row.id}`,
        })
        .then((data) => {
          self.projectService = data
          //转字符串
          self.projectService.amount = data.amount + ''
        })
    },
  },
  watch: {
    $route(row) {
      this.init(row)
    },
  },
  created: function() {},
  mounted: function() {
    this.init()
  },
  destroyed: function() {
    this.$router.push({
      name: 'projectService',
    })
  },
}
</script>
<style scoped></style>
